<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
    <title>The CheckBox Tree with custom Icons</title>
     <style type="text/css">
      @import "../../../dijit/themes/claro/claro.css";
      @import "../../../dijit/themes/claro/document.css";
      @import "../../../dijit/tests/css/dijitTests.css";
      @import "../../themes/claro/claro.css";
      @import "../../icons/networkIcons.css";
    </style>

    <script type="text/javascript">
      var dojoConfig = {
            async: true,
            parseOnLoad: true,
            isDebug: false,
            baseUrl: "../../../",
            locale: 'en-us',
            packages: [
              { name: "dojo",  location: "dojo" },
              { name: "dijit", location: "dijit" },
              { name: "cbtree",location: "cbtree" }
            ]
      };
    </script>

    <script type="text/javascript" src="../../../dojo/dojo.js"></script>
    <script type="text/javascript">
      require([
				"dojo/ready",
				"cbtree/store/Hierarchy",
        "cbtree/store/handlers/ifrsHandler",
        "cbtree/Tree",                       // Checkbox Tree
        "cbtree/extensions/TreeStyling",     // Tree styling extensions
        "cbtree/model/ForestStoreModel"      // Forest Store Model
        ], function( ready, Hierarchy, ifrsHandler, Tree, TreeStyling, ForestStoreModel ) {

					// The data file is the old ItemFileReadStore format, so convert it
					// using the ifrsHandler data handler before loading the store.
					var store = new Hierarchy( { url: "../../data/json/Network.json",
																				dataHandler: ifrsHandler,
																				handleAs:"ifrs"
																			});
					var model = new ForestStoreModel( {
									store: store,
									query: {type: 'computer'},
									rootLabel: 'The Network',
									checkedRoot: true
									});

					ready(function() {
						var tree = new Tree( {	model: model,
																		id: "tree09",
																		icon: { iconClass: "networkIcon", indent: true }
																	}, "CheckboxTree" );
						tree.startup();
					});
        });
    </script>
  </head>

  <body class="claro">
    <h1 class="DemoTitle">The CheckBox Tree with Custom Icons</h1>
    <p>
			Demonstrate the tree styling API with custom icons.
    </p>
    <div id="CheckboxTree">
    </div>
  </body>
</html>